<template>
  <div class="app-container">
    <!-- 查询表单 -->
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item>
        <el-input v-model="userQuery.name" placeholder="用户名" />
      </el-form-item>

      <el-form-item>
        <el-date-picker
          v-model="userQuery.begin"
          type="datetime"
          placeholder="选择开始时间"
          value-format="yyyy-MM-dd HH:mm:ss"
          default-time="00:00:00"
        />
      </el-form-item>
      <el-form-item>
        <el-date-picker
          v-model="userQuery.end"
          type="datetime"
          placeholder="选择截止时间"
          value-format="yyyy-MM-dd HH:mm:ss"
          default-time="00:00:00"
        />
      </el-form-item>

      <el-button type="primary" icon="el-icon-search" @click="getList()">查询</el-button>
      <el-button type="default" @click="resetData()">清空</el-button>
      <el-button type="default" @click="showUploadDialog()">上传</el-button>
      <a
        href="https://hbisedm-oss.oss-cn-hangzhou.aliyuncs.com/excel/Template02.xlsx"
        class="el-button"
      >
        下载模板</a
      >
    </el-form>

    <!-- 表格 -->
    <el-table :data="list" border fit highlight-current-row>
      <el-table-column label="ID号  " width="70" align="center">
        <template slot-scope="scope">
          <!-- {{ (page - 1) * limit + scope.$index + 1 }} -->
          {{ scope.row.uid }}
        </template>
      </el-table-column>

      <el-table-column prop="internshipName" label="企业名称" width="300" />

      <el-table-column prop="email" label="邮箱" width="180" />

      <el-table-column prop="mobilephone" label="手机" width="160" />

      <el-table-column prop="locationInfo" label="地理位置" width="160" />

      <!-- <el-table-column prop="internshipIntroduce" label="公司简介" width="400" /> -->

      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <router-link :to="'/internship/edit/' + scope.row.uid">
            <el-button type="primary" size="mini" icon="el-icon-edit">修改</el-button>
          </router-link>
          <el-button
            type="danger"
            size="mini"
            icon="el-icon-delete"
            @click="deleteInternById(scope.row.uid)"
            >删除</el-button
          >
          <el-button
            type="warning"
            size="mini"
            plain
            @click="getNoInternStuList(scope.row.uid)"
            >添加学生</el-button
          >

          <el-button type="success" size="mini" plain @click="getStusByIID(scope.row.uid)"
            >管理学生</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <el-dialog title="对应管理学生列表" :visible.sync="hasTeachStatus">
      <el-table :data="stuList">
        <el-table-column property="othername" label="姓名" width="200"></el-table-column>
        <el-table-column property="department" width="200" label="系别"></el-table-column>
        <el-table-column property="grade" width="200" label="班级"></el-table-column>

        <el-table-column label="操作" width="200" align="center">
          <template slot-scope="scope">
            <el-button
              type="danger"
              size="mini"
              icon="el-icon-delete"
              @click="deleteStu(scope.row.id)"
              >移除</el-button
            >
          </template></el-table-column
        >
      </el-table>
      <!-- 分页 -->
      <el-pagination
        :current-page="page"
        :page-size="limit"
        :total="total"
        style="padding: 30px 0; text-align: center"
        layout="total, prev, pager, next, jumper"
        @current-change="getList"
      />
    </el-dialog>

    <el-dialog title="学生列表" :visible.sync="dialogTableVisible">
      <el-table :data="stuList">
        <el-table-column property="othername" label="姓名" width="200"></el-table-column>
        <el-table-column property="department" width="200" label="系别"></el-table-column>
        <el-table-column property="grade" width="200" label="班级"></el-table-column>

        <el-table-column label="操作" width="200" align="center">
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="mini"
              icon="el-icon-check"
              @click="addStu(scope.row.id)"
              >添加</el-button
            >
          </template></el-table-column
        >
      </el-table>
      <!-- 分页 -->
      <el-pagination
        :current-page="page"
        :page-size="limit"
        :total="total"
        style="padding: 30px 0; text-align: center"
        layout="total, prev, pager, next, jumper"
        @current-change="getList"
      />
    </el-dialog>

    <el-dialog
      title="上传企业Excel"
      :visible.sync="dialogAddFile"
      width="500px"
      style="padding: 0"
      @close="resetAdd"
    >
      <div
        class="add-file-right"
        style="height: 70px; margin-left: 100px; margin-top: 15px"
      >
        <div class="add-file-right-img" style="margin-left: 70px">上传文件：</div>
        <input
          type="file"
          ref="clearFile"
          @change="getFile($event)"
          multiple="multiplt"
          class="add-file-right-input"
          style="margin-left: 70px"
          accept=".xlsx"
        />
        <span class="add-file-right-more">支持扩展名：.xlsx </span>
      </div>
      <div class="add-file-list">
        <ul>
          <li v-for="(item, index) in addArr" :key="index">
            <a>{{ item.name }}</a>
          </li>
        </ul>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitAddFile" size="small">开始上传</el-button>
        <el-button @click="resetAdd" size="small">全部删除</el-button>
      </div>
    </el-dialog>

    <!-- 分页 -->
    <el-pagination
      :current-page="page"
      :page-size="limit"
      :total="total"
      style="padding: 30px 0; text-align: center"
      layout="total, prev, pager, next, jumper"
      @current-change="getList"
    />
  </div>
</template>

<script>
import internApi from "@/api/internship";
import stuApi from "@/api/student";

export default {
  data() {
    return {
      list: null,
      page: 1, //当前页
      limit: 10, //每页记录数
      total: 0, //总记录数
      userQuery: {}, //条件封装对象
      //学生列表
      stuList: null,
      stuTotal: 0,
      hasTeachStatus: false,
      dialogAddFile: false,
      dialogTableVisible: false,
      addArr: []
    };
  },
  created() {
    this.getList();
  },
  methods: {
    showUploadDialog() {
      this.dialogAddFile = true;
    },
    resetAdd() {
      this.addArr = [];
    },
    getFile(event) {
      var file = event.target.files;
      for (var i = 0; i < file.length; i++) {
        //    上传类型判断
        var imgName = file[i].name;
        var idx = imgName.lastIndexOf(".");
        if (idx != -1) {
          var ext = imgName.substr(idx + 1).toUpperCase();
          ext = ext.toLowerCase();
          if (ext != "xlsx") {
            this.$message({
              type: "error",
              message: "请选择要上传的XLSX文件",
            });
          } else {
            this.addArr.push(file[i]);
          }
        } else {
        }
      }
    },
    submitAddFile() {
      if (0 == this.addArr.length) {
        this.$message({
          type: "info",
          message: "请选择要上传的文件",
        });
        return;
      }

      var formData = new FormData();
      formData.append("num", this.addType);
      formData.append("linkId", this.addId);
      formData.append("rfilename", this.addFileName);
      /**
       * 设置为企业类型
       */
      formData.append("type", 3);
      for (var i = 0; i < this.addArr.length; i++) {
        formData.append("file", this.addArr[i]);
      }
      // let config = {
      //   headers: {
      //     'Content-Type': 'multipart/form-data',
      //     'Authorization': this.token
      //   }
      // };

      internApi.addInternshipExcel(formData).then((response) => {
        console.log(response.success);
        if (response.success) {
          this.$message({
            message: "上传成功",
            type: "success",
          });
          this.dialogAddFile = false;
          this.getInternshipList()
        }
      });
    },

    getList() {
      internApi
        .getInternshipList(this.page, this.limit, this.userQuery)
        .then((response) => {
          this.list = response.data.internships;
        });
    },

    //获取没有实习单位的学生列表
    //id => 当前单位id
    getNoInternStuList(id) {
      this.internId = id;
      this.dialogTableVisible = true;
      stuApi.getStuNoInternList(this.page, this.limit).then((response) => {
        this.stuList = response.data.students;
        this.stuTotal = response.data.total;
      });
    },

    //获取当前实习单位的学生列表
    getStusByIID(iid) {
      this.internId = iid;
      internApi.getStuListByIid(iid).then((response) => {
        console.log(response.data);
        this.stuList = response.data.students;
        this.stuTotal = response.data.total;
        this.hasTeachStatus = true;
      });
    },
    //添加实习单位对应学生
    addStu(sid) {
      internApi.addStuIntern(sid, this.internId).then((resp) => {
        //提示信息
        this.$message({
          type: "success",
          message: "添加成功!",
        });
        //再次渲染
        this.getNoInternStuList(this.internId);
      });
    },

    //删除
    deleteInternById(iid) {
      console.log(iid);
      internApi.deleteIntern(iid).then((response) => {
        //提示信息
        this.$message({
          type: "success",
          message: "移除成功!",
        });
        //再次渲染
        this.getList();
      });
    },

    //移除对应学生列表
    deleteStu(sid) {
      internApi.deleteStuIntern(sid).then((resp) => {
        //提示信息
        this.$message({
          type: "success",
          message: "移除成功!",
        });
        //再次渲染
        this.getStusByIID(this.internId);
      });
    },
  },
};
</script>

<style>
.my-chart {
  width: 800px;
  height: 500px;
}
</style>
